<route>
{
  "layout": false,
  "style": {
    "navigationBarTitleText": "社区文章",
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <view class="article-page">
    <view class="top-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="back-btn" @tap="goBack">
        <u-icon name="arrow-left" size="30" color="#666"></u-icon>
      </view>
      <text class="top-title">文章详情</text>
      <view class="top-placeholder"></view>
    </view>

    <scroll-view scroll-y class="article-scroll" :scroll-with-animation="true" :style="{ paddingTop: statusBarHeight + 30 + 'px' }">
      <view class="article-hero">
        <text class="article-tag">{{ article.tag }}</text>
        <text class="article-title">{{ article.title }}</text>
        <view class="meta-row">
          <view class="meta-author">
            <image :src="article.author.avatar" class="author-avatar" mode="aspectFill" />
            <view class="author-info">
              <view class="author-name-row">
                <text class="author-name">{{ article.author.name }}</text>
                <view class="author-level">LV.{{ article.author.level }}</view>
              </view>
              <text class="author-date"> {{ article.publishDate }} · {{ article.readTime }} 阅读{{ article.readDuration }} </text>
            </view>
          </view>
          <view class="meta-actions">
            <view class="follow-btn">
              <text>关注</text>
            </view>
          </view>
        </view>
      </view>

      <view class="article-content">
        <view v-for="(section, index) in article.sections" :key="index" class="content-section">
          <text v-if="section.heading" class="section-heading">{{ section.heading }}</text>
          <text class="section-paragraph">{{ section.body }}</text>
          <view v-if="section.points" class="section-points">
            <view v-for="(point, idx) in section.points" :key="idx" class="point-item">
              <view class="point-dot"></view>
              <text class="point-text">{{ point }}</text>
            </view>
          </view>
        </view>

        <view class="links-card">
          <view class="link-row" v-for="link in article.links" :key="link.label">
            <text class="link-label">{{ link.label }}</text>
            <text class="link-value">{{ link.value }}</text>
          </view>
        </view>
      </view>

      <view class="comment-header">
        <text class="comment-title">全部评论 {{ comments.length }}</text>
        <view class="comment-tabs">
          <view v-for="tab in commentTabs" :key="tab" class="comment-tab" :class="{ active: tab === activeCommentTab }" @tap="activeCommentTab = tab">
            <text>{{ tab }}</text>
          </view>
        </view>
      </view>

      <view class="comment-list">
        <view v-for="item in comments" :key="item.id" class="comment-card">
          <view class="comment-main">
            <image :src="item.avatar" class="comment-avatar" mode="aspectFill" />
            <view class="comment-body">
              <view class="comment-info">
                <text class="comment-name">{{ item.name }}</text>
                <text class="comment-time">{{ item.time }}</text>
              </view>
              <text class="comment-text">{{ item.content }}</text>
              <view v-if="item.reply" class="comment-reply">
                <view class="reply-tag">作者回复</view>
                <text class="reply-text">{{ item.reply }}</text>
              </view>
              <view class="comment-actions">
                <view class="comment-action">
                  <text class="action-icon">👍</text>
                  <text class="action-count">{{ item.likes }}</text>
                </view>
                <view class="comment-action">
                  <text class="action-icon">💬</text>
                  <text class="action-count">{{ item.replies }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="comment-footer">
          <text class="footer-text">已经到底啦，快去发布你的观点</text>
        </view>
      </view>
    </scroll-view>

    <view class="comment-input-bar">
      <view class="input-placeholder">
        <text class="input-text">写评论...</text>
      </view>
      <view class="input-actions">
        <view class="input-action">
          <text>转发</text>
          <text class="small-count">{{ article.metrics.shares }}</text>
        </view>
        <view class="input-action">
          <text>评论</text>
          <text class="small-count">{{ comments.length }}</text>
        </view>
        <view class="input-action liked">
          <text>点赞</text>
          <text class="small-count">{{ article.metrics.likes }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20

const article = {
  title: '不用再盯盘了！这套量化模板每天早盘生成交易计划',
  tag: '策略研报',
  publishDate: '2025-02-16',
  readTime: '4.8k',
  readDuration: '7分钟',
  metrics: {
    views: '12.3k',
    likes: '1.1k',
    shares: '238'
  },
  author: {
    name: '席位雷达',
    level: 6,
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&h=200'
  },
  sections: [
    {
      heading: '为什么一套策略就能盯住全市场？',
      body: '我们将龙虎榜席位、北向资金与板块热度整合到一张热力图上，每个交易日 09:15 前自动生成重点观察清单，包含开盘前可能冲击涨停的连板股与回撤风险最大的赛道。',
      points: ['连接券商开放 API，实时同步委托与成交数据。', '一键聚合龙虎榜高频席位，生成资金强弱评分。', '根据量化情绪指标自动调整仓位建议范围。']
    },
    {
      heading: '核心模块拆解',
      body: '整套模板由 3 个模块组成：盘前扫描、交易执行与盘后复盘。你可以按需启用，也可以接入自己的选股模型。',
      points: ['盘前扫描：热力图+题材流强度，筛出 20 只高动量标的。', '交易执行：支持一键同步到 XTP、银河等券商终端。', '盘后复盘：题材涨停率、封板率、炸板率一图看懂。']
    },
    {
      heading: '实盘表现如何？',
      body: '我们在 2024 年 12 月~2025 年 2 月进行了回测与实盘跟踪，策略在震荡行情下仍保持 18% 的年化。关键在于及时识别退潮并降低仓位。',
      points: ['回测区间：2024-12-01 至 2025-02-10，最大回撤 4.6%。', '实盘跟踪：近 30 个交易日胜率 63%，平均收益 1.8%。', '风险控制：当热度指数跌破 45 时自动提示降仓。']
    }
  ],
  links: [
    {
      label: '策略仓位共享',
      value: 'quant.stocklab.cn/share/heatmap-plan'
    },
    {
      label: '代码仓库',
      value: 'github.com/stocklab-ai/heatmap-trading-template'
    }
  ]
}

const commentTabs = ['最新评论', '最热']
const activeCommentTab = ref('最新评论')

const comments = [
  {
    id: 'c1',
    name: '程序猿韭菜',
    time: '2 小时前',
    avatar: 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?auto=format&fit=crop&w=200&h=200',
    content: '照着模板跑了一周，确实省了很多盯盘时间，尤其是题材热度分数特别直观。',
    likes: '96',
    replies: '12',
    reply: '记得结合仓位管理指标使用，当热度跌破 50 时建议降低仓位。'
  },
  {
    id: 'c2',
    name: '北向追踪者',
    time: '昨天',
    avatar: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&h=200',
    content: '能不能讲讲连板信号的具体筛选条件？实盘发现有两只炸板的。',
    likes: '54',
    replies: '8',
    reply: '我们会优先保留封单充足且龙虎榜席位重合度高的标的，炸板率超过 35% 会自动剔除。'
  },
  {
    id: 'c3',
    name: '量化小散',
    time: '1 天前',
    avatar: 'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=200&h=200',
    content: '希望补充一份港股版本，近来港股的趋势抱团力度也很强。',
    likes: '37',
    replies: '5'
  },
  {
    id: 'c4',
    name: '席位挖掘机',
    time: '3 天前',
    avatar: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=200&h=200',
    content: '强烈建议加一个席位历史战绩的筛选，我这边手动比对还是挺费时间的。',
    likes: '66',
    replies: '9',
    reply: '感谢建议，下个版本会接入 60 天席位胜率榜，欢迎继续反馈。'
  }
]

const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.switchTab({ url: '/pages/community/index' })
    }
  })
}
</script>

<style lang="scss">
@import './index.scss';
</style>
